﻿@using ZBJF.Warranty.Common.Enums.InsuranceWarranty
@using ZBJF.Warranty.WebProvider
@using ZBJF.Warranty.Common.Enums
@model ZBJF.Warranty.Model.ViewModel.SocketModel.CollectOrderDataModel
@{
    ViewBag.Title = "Index";
}
@section Header{
    @Scripts.Render("~/bundles/datatable")
    @Styles.Render("~/Content/datatable")
}

<link href="~/Content/css/chat.css?v=11" rel="stylesheet" />
<!--分页表格数据搜索条件-->
<table>
    <tr>
        <td>真实姓名：</td>
        <td>
            <input type="text" class="input-small" id="RealName" />
        </td>
        <td>微信昵称：</td>
        <td>
            <input type="text" class="input-small" id="NickName" />
        </td>
        <td>报案单号：</td>
        <td>
            <input type="text" class="input-small" id="InsuranceOrderNum" />
        </td>
        <td>
            <input id="btnSubmit" class="btn btn-primary margin-l-10" type="button" value="查询" onclick="search();" />
        </td>
    </tr>
</table>

<!--分页表格数据-->
<div class="table-responsive dataTables_wrapper">
    <table id="weiXinUserList" class="table table-striped table-bordered table-hover">
        <thead>
            <tr>
                <th width="12">序号</th>
                <th width="30">真实姓名</th>
                <th width="30">微信昵称</th>
                <th width="30">手机号码</th>
                <th width="100">备注信息</th>
                <th width="100">报案单号</th>
                <th width="80">操作</th>
            </tr>
        </thead>
    </table>
</div>

<input type="hidden" value="" id="openId" /><!--聊天记录-->
<input type="hidden" value="" id="CurrentOpenId" /><!--关联报案工单-->
<!--蒙版-->
<div class="maskContent" style="display:none;">
</div>
<!--聊天记录 top:50%;left:50%; margin-left: -260px; margin-top:-260px;  style="display:none" -->
<div class="chatRecord" id="chatRecordContent">
    <div class="recordTitle">
        <span style="margin-left:20px;"> 与 <span class="name"></span> 的聊天记录</span>
        <span class="opera">+</span>
    </div>
    <div class="recordContent" id="chatContent">
        <ul></ul>
    </div>

    <div class="searchChatRecord">
        <ul style="float:left;">
            <li class="imageChoose">
                素材选取
            </li>
            <li>
                最近时间：
                <select id="TimeRange">
                    <option value="100" selected>一个月</option>
                    <option value="200">两个月</option>
                    <option value="300">三个月</option>
                </select>
            </li>
            <li>
                类型：
                <select id="MessageType">
                    <option value="0" selected>全部</option>
                    <option value="100">文本</option>
                    <option value="200">图片</option>
                </select>
            </li>
            <li>
                内容：<input type="text" class="input-small" id="Message" />
            </li>
            <li>
                <input type="button" id="searchBtn" class="btn btn-primary Search-R margin-l-3" value="查询" />
            </li>
        </ul>
        <ul style="float:right;margin-right:10px;" id="pageContainer"></ul>
    </div>

</div>

<!--素材选取框-->
<div class="chatRecord" id="imgChooseContent">
    <div class="recordTitle">
        <span style="margin-left:20px;">资料选取</span>
        <span class="opera">+</span>
    </div>

    <div class="recordContent" id="imgContent">
        <ul style="display:inline">
            <li class="imgContentItem ">
                <div>
                    <img src="/UploadFile/File/workOrder/2018/1/9/oauli1aOszYkXEGiGipjLNfN2MnE/201801090542210456.jpg" />
                </div>
            </li>
        </ul>
    </div>

    <div class="searchChatRecord">
        <ul class="operationContent">
            <li id="connectOrderBtn">
                关联报案工单
            </li>
            <li id="selectAllImg">
                全选
            </li>
        </ul>
        <ul style="float:right;margin-right:10px;" id="pageContainer1"></ul>
    </div>
</div>

<!--报案工单资料收集框-->
<div class="chatRecord" id="connectOrderContent">
    <div class="recordTitle">
        <span style="margin-left:20px;">关联报案单号</span>
        <span class="opera">+</span>
    </div>

    <div class="recordContent" id="orderContent">
        <div>
            <span>
                报案单号：
                <select id="warrantyRecordNo" style="width:126px;"></select>
            </span>
            <span>
                资料类型：
                @Html.DropDownListFor(m => m.FileinfoType, ConvertToSelector.Instance.EnumTypeConvertToSelectList(typeof(WarrantyRecordImageEnums)), new { validate = "{required:true,messages:{required:'请选择资料类型'}}" })
            </span>
            <span>
                <input type="button" value="提交" id="submitOrderConnect" class="btn btn-primary Edit-R margin-l-10" />
            </span>
        </div>
        <ul style="display:inline"></ul>
    </div>
</div>

<!---->
<!--弹框__关联工单号-->
<div class="layui-layer layui-layer-page" id="associatedWarrantyRecordNo" style="z-index: 999;display:none; width: 430px; height:260px; top:0; left: 0;right:0;bottom:0;margin:auto;">
    <div class="layui-layer-title">关联报案单号</div>
    <div id="" class="layui-layer-content">
        <div class="layim-add-box">
            <div class="layim-add-img">
                <span class="inputTitle">用户名：</span>
                <span id="associatedWarrantyRecordNoUserName">小熊</span>
            </div>
            <div class="layim-add-img">
                <span class="inputTitle">已有报案单号：</span>
                <span><textarea id="areaHasOrder" readonly="readonly"></textarea></span>
            </div>
            <div class="layim-add-img">
                <span class="inputTitle">报案单号：</span>
                <span><input type="text" class="input-big" id="WarrantyRecordNo" /></span>
            </div>
        </div>
    </div>
    <span class="layui-layer-setwin">
        <a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;" onclick="javascript: $('#associatedWarrantyRecordNo').hide();"></a>
    </span>
    <div class="layui-layer-btn layui-layer-btn-">
        <a class="layui-layer-btn0" id="addWarrantyRecordNoBtn">确认</a>
        <a class="layui-layer-btn1" id="cancelWarrantyRecordNoBtn">取消</a>
    </div>
</div>

<script src="~/Content/js/moment.js"></script>
<script src="~/Content/js/paging.js?v=1"></script>
<link href="~/Content/css/paging.css" rel="stylesheet" />
@section scripts{
    <script type="text/javascript">
        var isSearch = false;
        $(function () {
            //微信用户数据表格数据
            var objTable = $("#weiXinUserList")
                .dataTable({
                    fnDrawCallback: function () {
                        ControlPermissionOperate();
                    },
                    "aaSorting": [[9, "desc"]],
                    "sAjaxSource": "/SocketChat/GetWeiXinUserList",
                    aoColumns: [
                        {
                            "mData": null,
                            "bSortable": false,
                            "fnRender": function (nRow) {
                                return nRow.iDataRow + 1;
                            }
                        },
                        { "bSortable": false, "mData": "RealName" },
                        { "bSortable": false, "mData": "NickName" },
                        { "bSortable": false, "mData": "Phone" },
                        { "bSortable": false, "mData": "Remark" },
                        { "bSortable": false, "mData": null },
                        { "mData": null, "bSortable": false }
                    ],
                    "fnRowCallback": function (nRow, aData, iDisplayIndex) {
                        var _name = (aData.RealName == "null" || !aData.RealName) ? aData.NickName : aData.RealName
                        var html = "<a class='Edit-R associatedWarrantyRecordNo' openId='" + aData.OpenId + "' name='" + _name + "' href='#' title='关联报案工单'>关联报案工单</i></a>";
                        html += " | <a class='Edit-R weiXinChat' openId='" + aData.OpenId + "' name='" + _name + "' href='#' title='聊天记录'>聊天记录</i></a>";
                        $('td:eq(6)', nRow).html(html);

                        if (aData.WarrantyRecordNoList && aData.WarrantyRecordNoList.length > 0) {
                            var WarrantyRecordNoStr = "";
                            aData.WarrantyRecordNoList.forEach(function (item, index) {
                                WarrantyRecordNoStr += item.WarrantyRecordNo + ","
                                if (++index % 3 == 0)
                                    WarrantyRecordNoStr += "\r\n";
                            })
                            $('td:eq(5)', nRow).html(WarrantyRecordNoStr);
                        }
                    }
                });

            //--------------------------------------关联报案工单 start-------------------------

            //关联报案工单框
            $(document).on("click", ".associatedWarrantyRecordNo", function () {
                var openid = $(this).attr("openId");
                var name = $(this).attr("name");
                $("#CurrentOpenId").val(openid);
                $("#WarrantyRecordNo").val("");
                $("#areaHasOrder").html("");
                $("#associatedWarrantyRecordNoUserName").html(name);
                $.ajax({
                    url: "/SocketChat/GetUserOrderList",
                    dataType: "json",
                    type: "GET",
                    data: { openId: openid },
                    success: function (data) {
                        if (data.Result) {
                            var orderList = "";
                            data.Data.forEach(function (item) {
                                orderList += item.WarrantyRecordNo + "\r\n";
                            })
                            $("#areaHasOrder").html(orderList);
                        }
                    }
                });
                $("#associatedWarrantyRecordNo").show();

            })
            //关闭弹框——关联报案单号
            $("#cancelWarrantyRecordNoBtn").on("click", function () {
                $("#associatedWarrantyRecordNo").hide();
                $("#WarrantyRecordNo").val("");
            })
            //提交数据--关联报案单号
            $("#addWarrantyRecordNoBtn").on("click", function () {
                $(this).attr('disabled', "true");
                var _data = {};
                _data.OpenId = $.trim($("#CurrentOpenId").val());
                _data.WarrantyRecordNo = $.trim($("#WarrantyRecordNo").val());
                if (!_data.OpenId || !_data.WarrantyRecordNo) {
                    alert("请填写报案单号！");
                    $(this).removeAttr('disabled');
                    return;
                }
                $.ajax({
                    url: "/SocketChat/AssociatedWarrantyRecordNo",
                    dataType: "json",
                    type: "GET",
                    data: _data,
                    success: function (data) {
                        $("#addWarrantyRecordNoBtn").removeAttr('disabled');
                        alert(data.Message);
                        if (data.Result) {
                            $("#associatedWarrantyRecordNo").hide();
                            search();
                        }
                    }
                });
            })

            //--------------------------------------关联报案工单 end---------------------------


            //--------------------------------------聊天记录 start-------------------------
            var chatRecordPage = "";
            //聊天记录框
            $(document).on("click", ".weiXinChat", function () {
                var openid = $(this).attr("openId");
                var name = $(this).attr("name");
                $("#openId").val(openid);
                $(".name").html(name);

                //设置内容框的高度
                var _contentHeight = $("#chatRecordContent").height();
                $("#chatContent").css("height", _contentHeight - 100 + "px");
                chatRecordPage = new Paging();
                chatRecordPage.pagingInit(
                    _container = "#chatContent ul",
                    _pageContainer = "#pageContainer",
                    _url = "/SocketChat/GetChatRecord",
                    _pageSize = 30,
                    _params = function () {
                        return { OpenId: $("#openId").val(), TimeRange: $("#TimeRange option:selected").val(), MessageType: $("#MessageType option:selected").val(), Message: $.trim($("#Message").val()) };
                    },
                    _callback = function (data) {
                        var _html = "";
                        data.forEach(function (item, index, array) {
                            var _name = (item.RealName == "null" || !item.RealName) ? item.NickName : item.RealName
                            //100:客户消息
                            if (item.MessageSource == 100) {
                                _html += buildCustomerMessage(item.Message, item.MessageType, item.CreateTime, _name, item.HeadLogo);
                            }//200：客服消息
                            else if (item.MessageSource == 200) {
                                _html += buildServiceMessage(item.Message, item.MessageType, item.CreateTime, item.UserDisPlayName);
                            }
                        })
                        return _html;
                    }
                );

                chatRecordPage.pagingStart();

                $("#imgChooseContent").hide();
                $("#connectOrderContent").hide();
                $("#chatRecordContent").show();
            })
            //聊天记录框
            $(document).on("click", ".opera", function () {
                $(this).parents(".chatRecord").hide();
                $(".maskContent").hide();
            })

            var imgRecordPage = "";
            //素材选取
            $(".imageChoose").on("click", function () {
                $("#imgChooseContent").show();

                //设置内容框的高度
                var _contentHeight = $("#imgChooseContent").height();
                $("#imgContent").css("height", _contentHeight - 100 + "px");
                imgRecordPage = new Paging();
                imgRecordPage.pagingInit(
                    _container = "#imgContent ul",
                    _pageContainer = "#pageContainer1",
                    _url = "/SocketChat/GetChatRecord",
                    _pageSize = 10,
                    _params = function () {
                        return { openId: $("#openId").val(), MessageType: 200 };
                    },
                    _callback = function (data) {
                        var _html = "";
                        data.forEach(function (item, index, array) {
                            _html += '<li class="imgContentItem ">';
                            _html += ' <div>';
                            _html += ' <img src="' + item.Message + '" WeiXinChatRecordID="' + item.ID+ '" />';
                            _html += ' </div>';
                            _html += ' </li>';
                        })
                        return _html;
                    });

                imgRecordPage.pagingStart({ openId: $("#openId").val(), MessageType: 200 });

            })
            //--------------------------------------聊天记录 end-------------------------


            //-----------------------------------聊天图片列表 start-----------------------

            //选择图片
            $(document).on("click", "#imgContent ul li", function () {
                if ($(this).hasClass("borderSelected"))
                    $(this).removeClass().addClass("imgContentItem");
                else
                    $(this).removeClass().addClass("borderSelected");
            })
            //全选图片
            $("#selectAllImg").on("click", function () {
                if ($.trim($(this).html()) == "全选") {
                    $("#imgContent ul li").removeClass().addClass("borderSelected");
                    $(this).html("取消全选");
                }
                else {
                    $("#imgContent ul li").removeClass().addClass("imgContentItem");
                    $(this).html("全选");
                }
            })

            //关联报案工单按钮点击
            $("#connectOrderBtn").on("click", function () {
                //获取所有选中的图片li
                var selectedLi = $("#imgContent ul li[class='borderSelected']").clone();
                if (selectedLi.length < 1) {
                    alert("至少选择一张图片");
                    return;
                }
                var openId = $("#openId").val();
                //1、查询报案单号
                $.ajax({
                    url: "/SocketChat/GetUserReportNumber",
                    dataType: "json",
                    type: "GET",
                    async: false,
                    data: { openId: openId },
                    success: function (data) {
                        if (!data.Result) {
                            alert(data.Message);
                            return;
                        }
                        var _option = "";
                        var index = 0;
                        data.Data.forEach(function (itemNo) {
                            if (index == 0)
                                _option += "<option dataId='" + itemNo.ID + "' value='" + moment(itemNo.CreateTime).format('YYYY-MM-DD HH:mm:ss') + "' selected>" + itemNo.WarrantyRecordNo + "</option>";
                            else
                                _option += "<option dataId='" + itemNo.ID + "' value='" + moment(itemNo.CreateTime).format('YYYY-MM-DD HH:mm:ss') + "'>" + itemNo.WarrantyRecordNo + "</option>";
                            index++;
                        })
                        $("#warrantyRecordNo").html(_option);
                    }
                });

                selectedLi.css("border", "1.5px #5FB878 solid");
                $("#orderContent ul").html(selectedLi);
                $("#connectOrderContent").show();
                $(".maskContent").show();
            })
            //-----------------------------------聊天图片列表 end-------------------------

            //关联报案工单提交数据
            $("#submitOrderConnect").on("click", function () {
                $(this).attr('disabled', "true");
                var _data = {};
                _data.OpenId = $.trim($("#openId").val());
                _data.WarrantyRecordNo = $.trim($("#warrantyRecordNo option:selected").html());
                _data.CreateTime = $.trim($("#warrantyRecordNo option:selected").val());
                _data.ID = $.trim($("#warrantyRecordNo option:selected").attr("dataId"));
                _data.FileinfoType = $.trim($("#FileinfoType option:selected").val());
                _data.ImagesUrl = [];
                _data.WeiXinChatRecordID = [];
                var images = $("#orderContent ul li div img");

                if (!images || images.length < 1) {
                    alert("至少选择一张图片！");
                    $(this).removeAttr('disabled');
                    return;
                }
                for (var i = 0, j = images.length; i < j; i++) {
                    _data.ImagesUrl.push($(images[i]).attr("src"));
                    _data.WeiXinChatRecordID.push($(images[i]).attr("WeiXinChatRecordID"));
                }

                if (!_data.OpenId) {
                    alert("参数错误！");
                    $(this).removeAttr('disabled');
                    return;
                }
                if (!_data.WarrantyRecordNo) {
                    alert("请选择报案单号！");
                    $(this).removeAttr('disabled');
                    return;
                }
                if (!_data.FileinfoType) {
                    alert("请选择资料类型！");
                    $(this).removeAttr('disabled');
                    return;
                }
                if (!_data.ImagesUrl || _data.ImagesUrl.length < 1) {
                    alert("至少选择一张图片！");
                    $(this).removeAttr('disabled');
                    return;
                }

                $.ajax({
                    url: "/SocketChat/CollectData",
                    dataType: "json",
                    type: "POST",
                    async: false,
                    data: _data,
                    success: function (data) {
                        $("#submitOrderConnect").removeAttr('disabled');
                        alert(data.Message);
                        if (data.Result) {
                            $("#connectOrderContent").hide();
                            $(".maskContent").hide();
                        }
                    }
                });
            })

            //查询
            $("#searchBtn").on("click", function () {
                chatRecordPage.pageSearch();
            })

            //图片
            $(document).on("click", ".mineMessageText img", function () {
                window.open($(this).attr("src"));
            })
        });

        function search() {
            queryParamList.RealName = $.trim($("#RealName").val());
            queryParamList.NickName = $.trim($("#NickName").val());
            queryParamList.InsuranceOrderNum = $("#InsuranceOrderNum").val(); //保险单号
            $("#weiXinUserList").dataTable().fnDraw();
        }

        //拼接客户消息
        function buildCustomerMessage(Message, MessageType, Time, nickName, logo) {
            var messageContent = "";
            var message = Message;
            if (MessageType == 200) {
                message = "<img src='" + Message + "' style='width:100%;border-radius:none;' >";
            } else if (MessageType == 300) {
                message = '<audio src="' + Message + '" controls preload="none"></audio>';
            }

            messageContent += '    <li class="targetMessage">';
            messageContent += '       <div>';
            messageContent += '             <img src="' + logo + '" title="头像" />';
            messageContent += '         </div>';
            messageContent += '          <div style="margin-left:15px;">';
            messageContent += '            <span class="name">' + nickName + '</span>';
            messageContent += '             <span>' + moment(Time).format('YYYY-MM-DD HH:mm') + '</span>';
            messageContent += '              <div class="mineMessageDiv">';
            messageContent += '                   <div class="sanjiao"></div>';
            messageContent += '                   <div class="mineMessageText">';
            messageContent += message;
            messageContent += '                   </div>';
            messageContent += '                </div>';
            messageContent += '            </div>';
            messageContent += '      </li>';
            return messageContent;
        }
        //拼接客服消息
        function buildServiceMessage(Message, MessageType, Time, nickName) {
            var message = Message;
            if (MessageType == 200) {
                message = "<img src='" + Message + "' style='width:100%;border-radius:none;' >";
            }
            var _html = '<li class="mineMessage">';
            _html += '   <div>';
            _html += '            <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" title="头像" />';
            _html += '        </div>';
            _html += '       <div style="margin-right:15px;">';
            _html += '           <span>' + moment(Time).format('YYYY-MM-DD HH:mm') + '</span>';
            _html += '            <span>' + nickName + '</span>';
            _html += '           <div class="mineMessageDiv">';
            _html += '                <div class="sanjiao"></div>';
            _html += '                <div class="mineMessageText">';
            _html += message;
            _html += '               </div>';
            _html += '            </div>';
            _html += '        </div>';
            _html += '   </li>';
            return _html;
        }
        //滚动条滚到最下面
        function scrollTop(_element) {
            //自动滑倒滚动条最下面
            var jsdiv = _element[0];
            jsdiv.scrollTop = jsdiv.scrollHeight;
        }

    </script>
}
